
<%@ page import="ar.com.photo_admin.domain.EventAlbum" %>
<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'eventAlbum.label', default: 'EventAlbum')}" />
		<title><g:message code="default.show.label" args="[entityName]" /></title>
		
		<link rel="stylesheet" href="${resource(dir:'css',file:'bootstrap.min.css')}" type="text/css" />					
		<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
					
	</head>
	<body>
	
		<div class="container">			
			
			
			<g:if test="${flash.message}">
				<div class="alert alert-success">  
				  <a class="close" data-dismiss="alert">×</a>  
				  <div class="message" role="status">${flash.message}</div>  
				</div>  
				
			</g:if>
			
			<g:hasErrors bean="${eventAlbumInstance}">
			<ul class="errors" role="alert">
				<g:eachError bean="${eventAlbumInstance}" var="error">
				<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
				</g:eachError>
			</ul>
			</g:hasErrors>																		
			
			<g:form  name="albumForm" action="save">	 
				 <g:hiddenField name="id" value="${eventAlbumInstance?.id}" />
				 <g:hiddenField name="event_id" value="${event_id}" />
				 <g:hiddenField id="hidden_cover_id" name="cover_photo_id" value=""/>
				 <g:hiddenField id="hidden_selected_photos_ids" name="selected_photos_id" value=""/>
				 <div id="albumHeader" class="row">				 
				 	
				 	<div id="thumbnailContainer" class=" coverPhotoContainer span4">
				 		<g:if test="${eventAlbumInstance.coverPhoto}"> 
				 			<img id="coverPhotoImage" src="${eventAlbumInstance?.coverPhoto?.url}" class="coverPhoto thumbnail" name="${eventAlbumInstance?.coverPhoto?.id}"></img>
						</g:if>				 							
						<g:else>
							<img id="coverPhotoImage" src="/PhotoAdminGrailsApp/images/defaultImage.jpg" class="coverPhoto thumbnail" name="0"></img>
						</g:else>	
					</div>
					
					<div class="span8">
						<div class="showField ">
							<div class="header_02">							
								${eventAlbumInstance?.name}
							</div>
							<div class="descriptionShow">							
								${eventAlbumInstance?.description}
							</div>
														
						</div>
						<div class="editField fieldcontain ${hasErrors(bean: eventAlbumInstance, field: 'name', 'error')} required">
							<label for="name">
								<g:message code="eventAlbum.name.label" default="Nombre del album" />
								<span class="required-indicator">*</span>
							</label>									
							<g:textField class="input-large albumName" name="name" required="" value="${eventAlbumInstance?.name}" placeholder="Ingrese el nombre"/>
							<label for="description">
								<g:message code="eventAlbum.description.label" default="Descripción del album" />
							</label>
							<g:textArea class="presentationText" rows="3" maxlength="200" name="description" value="${eventAlbumInstance?.description}"
								placeholder="Ingrese la descripción"></g:textArea>														
						</div>
						
					</div>					
				</div>	
				
				
				


			</g:form>
				<div>
					<button id="start-slideshow" class="btn btn-large btn-success" data-slideshow="5000" data-target="#modal-gallery" data-selector="#gallery a[rel=gallery]">Ver Presentación</button>
					<button id="btn_edit" class="btn btn-large btn-success showField" >Editar</button>
					<button style="display:none;" id="btn_save" form="albumForm" class="btn btn-large btn-success editField" onclick="albumController.setHiddenFields();" >Guardar</button>				
					<button style="display:none;" id="btn_cancel" class="btn btn-large btn-success editField" >Cancelar</button>
					<button style="display:none;" id="btn_back" class="btn btn-large btn-success showField" >Volver al evento</button>
					<!--  <button id="toggle-fullscreen" class="btn btn-large btn-primary" data-toggle="button" >Toggle Fullscreen</button> -->            								
				</div>						
								
				<!-- En este div se almacenaran las imagenes que se encuentran seleccionadas en el album -->							
				<div class="gridImagesContainer">						
				    <div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" class="row">	
					</div>						
				</div>								
								
								
				<div class="albumEditableContainer" >
					<h2>
						Fotos no seleccionadas del evento.
					</h2>
					
					<div id="unselectedPhotosGridContainer" >
						<div class="row">							
						</div> 
					</div>
				</div>	

			
			<!-- modal-gallery is the modal dialog used for the image gallery -->
			<div id="modal-gallery" class="modal modal-gallery hide fade">
			    <div class="modal-header">
			    	<h3 class="modal-title"></h3>
			        <div class="modal-close"><a class="close" data-dismiss="modal">&times;</a></div>			        
			    </div>
			    <div class="modal-body"><div class="modal-image"></div></div>
			    <div class="modal-footer">			    			    			    
			    	
			        <a class="btn modal-download" target="_blank">
			            <i class="icon-download"></i>
			            <span>Descargar</span>
			        </a>
			        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
			            <i class="icon-play icon-white"></i>
			            <span>Presentación</span>
			        </a>
			        <a class="btn btn-info modal-prev">
			            <i class="icon-arrow-left icon-white"></i>
			            <span>Anterior</span>
			        </a>
			        <a class="btn btn-primary modal-next">
			            <span>Siguiente</span>
			            <i class="icon-arrow-right icon-white"></i>
			        </a>
			    </div>
			</div>
									
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
			<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
			<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>		
			<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
			
			
			<g:javascript src="imagePreview.js" />
			
			<g:javascript src="controller/EventAlbumController.js" />
			<g:javascript src="model/Album.js" />
			<g:javascript src="model/Photo.js" />
			
			<script type="text/javascript">
			jQuery(document).ready(function(){
							
				albumController = new EventAlbumController();		
							
								

				//Veo si entra en modo edicion o creacion				
				var editMode =${editMode}; 
				if (editMode)
				{
					//Modo creacion
					albumController.setEditMode(${unselectedPhotos});
				}
				else{
					albumController.loadSelectedPhotos(${albumPhotos});	
				}
				
				jQuery("#btn_edit").click(function(event){									
					var postingUrl = "${createLink(controller: 'eventAlbum', action: 'edit')}";					
					var albumId = "${eventAlbumInstance?.id}";
					var eventId = "${event_id}";					
					albumController.editAlbum(postingUrl,albumId,eventId);
				});

				jQuery("#btn_cancel").click(function(){											
					var successUrl = "${createLink(controller: 'event', action: 'show', id: event_id)}";
					window.location.replace(successUrl);
				});

				jQuery("#btn_back").click(function(){
					var successUrl = "${createLink(controller: 'event', action: 'show', id: eventAlbumInstance?.event?.id)}";
					window.location.replace(successUrl);
				});

				imagePreview();
				
		   	});
			</script>
			
			
			
			
			<script>

			$(function () {	
							
			    'use strict';
			
			    // Start slideshow button:
			    $('#start-slideshow').button().click(function () {
			        var options = $(this).data(),
			            modal = $(options.target),
			            data = modal.data('modal');
			        if (data) {
			            $.extend(data.options, options);
			        } else {
			            options = $.extend(modal.data(), options);
			        }
			        modal.find('.modal-slideshow').find('i')
			            .removeClass('icon-play')
			            .addClass('icon-pause');
			        modal.modal(options);
			    });
			
			    // Toggle fullscreen button:
			    $('#toggle-fullscreen').button().click(function () {
			        var button = $(this),
			            root = document.documentElement;
			        if (!button.hasClass('active')) {
			            $('#modal-gallery').addClass('modal-fullscreen');
			            if (root.webkitRequestFullScreen) {
			                root.webkitRequestFullScreen(
			                    window.Element.ALLOW_KEYBOARD_INPUT
			                );
			            } else if (root.mozRequestFullScreen) {
			                root.mozRequestFullScreen();
			            }
			        } else {
			            $('#modal-gallery').removeClass('modal-fullscreen');
			            (document.webkitCancelFullScreen ||
			                document.mozCancelFullScreen ||
			                $.noop).apply(document);
			        }
			    });			  
			    
			});
			</script>

							    
		</div>
	</body>
</html>
